<template>
  <div class="container-big">
    <div style="padding-bottom: 436px;" class="container">
      <banner />
      <!-- <div class="uncan-right" /> -->
      <div class="from-box">
        <div v-if="formJson.length!=0" class="from-tit cenLeft">
          <img src="https://gw.alicdn.com/tfs/TB1vpgTHcbpK1RjSZFyXXX_qFXa-200-200.png">
          请完整填写下列信息
        </div>
        <div v-if="formJson.length!=0" style="padding: 0px 16px;" class="from ">
          <div v-for="(item,index) of formJson " :key="index" style="padding: 0px" class="from-item">
            <inputText v-if="item.componentName=='stringTem'" :this-componen="item" :isReadonly="isReadonly" />
            <inputNumber v-if="item.componentName=='numberTem'" :this-componen="item" :isReadonly="isReadonly" />
            <moreSelect v-if="item.componentName=='moreSelectTem'" :this-componen="item" :isReadonly="isReadonly" />
          </div>
        </div>
      </div>
    </div>
    <div class="screen-fixed-box cenCen">
      <div v-if="formJson.length!=0&&!isReadonly" class="from-saveBtn cenCen" @click="checkFormJson()">
        确认
      </div>
    </div>
  </div>
</template>
<script>
import { mapMutations, mapState } from "vuex";
import clonedeep from "lodash.clonedeep";

// 表单组件部分
import inputText from "./assembly/inputText"; //input type为text 组件
import inputNumber from "./assembly/inputNumber"; //input type为number 组件
import moreSelect from "./assembly/moreSelect.vue"; //多选组件
import banner from "./../orderEnter/banner/banner";

import {
  getFromField as getFormField,
  getTicketInfo,
  addTicketPsnDoc,
  upDataTicketPsnDoc
} from "./../../api/infoEntry.js"; // 获取表单字段等接口
export default {
  components: {
    inputText,
    inputNumber,
    moreSelect,
    banner
  },
  data() {
    return {
      activityParams: {}, //活动参数
      isReadonly: false, //是否只读
      resGetTicketInfo: {}, //查询出来的信息
      isAdd: true, //是新增
      formJson: [] //表单json
    };
  },
  created() {
    this.activityParams = this.$route.query.activityParams;
    console.log(this.activityParams);
    this.initFun();
  },
  methods: {
    ...mapMutations("forward", ["updateFormData"]),
    async initFun() {
      this.$store.state.loading = true;

      // 得到表单字段渲染页面
      if (!this.formData || !this.formData.length) {
        this.formJson = await this.getFormField();
        for (let i = 0; i < this.formJson.length; i++) {
          if (this.formJson[i].attribute.filedCode == "uTel") {
            this.$set(this.formJson[i].attribute, "areaCode", "86");
          }
        }
      } else {
        this.formJson = this.formData;
      }
      this.$store.state.loading = false;
    },
    // 当国籍发生变化时候
    async countryChange(isChine) {
      // this.isChangeType = isChine; // 是否可以改变证件类型
      // const haveprovince = await this.checkFormJsonHaveprovince(isChine);
      // if (!isChine && haveprovince) {
      //   //如果是国外并且有省份字段,则去掉省份
      //   this.formJson.splice(this.provinceFiled.index, 1);
      // }
      // if (isChine && !haveprovince) {
      //   //如果是国内并且没有有省份字段,则添加省份
      //   this.formJson.splice(
      //     this.provinceFiled.index,
      //     0,
      //     this.provinceFiled.value
      //   );
      // }
    },
    // 获取表单字段
    async getFormField() {
      let resData = await getFormField(
        this.activityParams.activityId,
        this.activityParams.ticketTypeId
      );
      if (resData.success) {
        return resData.result;
      }
      return [];
    },
    // 检验表单信息是否符合要求
    async checkFormJson() {
      //填写表单的集合数据及认证是否必填项为空
      let resData = await this.checkFromItem(this.formJson);

      if (resData) {
        console.log("this.formJson", this.formJson);
        this.updateFormData(clonedeep(this.formJson));
        this.$store.state.saveFromVal = this.formJson;
        this.$router.back();
      }
    },
    // 验证表格里面的每一项
    checkFromItem(formList) {
      let ifCheckAll = true; //是否检查完了全部(每一个必填项信息)
      for (let i = 0; i < formList.length; i++) {
        if (
          formList[i].attribute.ifCheck &&
          !formList[i].attribute.filedValue
        ) {
          ifCheckAll = false;
          this.$toast(
            `${
              formList[i].attribute.placeholder
                ? formList[i].attribute.placeholder
                : "请填写"
            }${formList[i].attribute.titName}`
          );
          break;
        } else if (
          //验证邮箱
          formList[i].attribute.ifCheck &&
          formList[i].attribute.filedValue &&
          formList[i].attribute.filedCode == "uEmail"
        ) {
          let regu = /@/;
          let re = new RegExp(regu);
          if (!re.test(formList[i].attribute.filedValue)) {
            ifCheckAll = false;
            this.$toast("请填写正确邮箱");
            break;
          }
        } else if (
          formList[i].attribute.ifCheck &&
          formList[i].attribute.filedValue &&
          formList[i].attribute.filedCode == "uTel" &&
          !/^\d+$/.test(formList[i].attribute.filedValue)
        ) {
          ifCheckAll = false;
          this.$toast("请填写正确的手机号码");
          break;
        } else if (
          formList[i].attribute.ifCheck &&
          formList[i].attribute.filedValue &&
          formList[i].attribute.filedCode == "uTel" &&
          formList[i].attribute.areaCode == "86" &&
          formList[i].attribute.filedValue.length != 11
        ) {
          ifCheckAll = false;
          this.$toast("请填写正确的手机号码");
          break;
        }
      }
      return new Promise((resolve, reject) => {
        resolve(ifCheckAll);
      });
    }
  },
  computed: {
    ...mapState({
      formData: state => state.forward.formData
    })
  }
};
</script>

<style >
.from-saveBtn {
  width: 100%;
  height: 110px;
  background-image: linear-gradient(-116deg, #3cb9ff 0%, #6044d4 100%);
  font-size: 36px;
  color: #eeeeee;
  text-align: center;
  cursor: pointer;
}
.from-saveBtn:active {
  opacity: 0.8;
}
.from-box {
  width: 100%;
  height: auto;
  padding: 0px 5%;
  margin-top: 16px;
  z-index: 2;
}
.from-tit {
  width: 100%;
  height: auto;
  text-align: left;
  font-size: 22px;
  color: #b9b9bb;
}
.from-tit > img {
  width: 26px;
  height: auto;
  margin-right: 6px;
}
.from {
  width: 100%;
  height: auto;
  min-height: 160px;
  background: rgba(0, 0, 0, 0.4);
  padding: 0px 0px;
  margin-top: 16px;
}
.from-item {
  width: 100%;
  height: auto;
}
.from > div:last-of-type > div {
  border-bottom: none;
}
/* 组件input样式 */
.from-input-box {
  width: 100%;
  height: auto;
  min-height: 100px;
  position: relative;
  border-bottom: 1px solid rgba(151, 151, 151, 0.2);
  padding: 6px 1px;
}
.from-input-tit {
  width: auto;
  max-width: 146px;
  height: auto;
  min-height: 100px;
  font-size: 28px;
  color: #ffffff;
  text-align: left;
  padding: 1px 6px 0px 0px;
  position: relative;
}
.select-phone {
  position: absolute;
  right: -76px;
  top: 0px;
  width: auto;
  min-width: 66px;
  height: 100%;
  cursor: pointer;
  z-index: 3;
}
.from-input-tit-check {
  margin-right: 1px;
}
.checkNot {
  opacity: 0;
}
.from-input {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  padding-left: 156px;
  padding-right: 46px;
  font-size: 28px;
  color: #fff;
  text-align: left;
}
.from-input-right-icon {
  position: absolute;
  right: 0px;
  top: 0px;
  width: auto;
  height: 100%;
}
.from-input-right-icon > img {
  width: 36px;
  height: auto;
}
.haveSelectPhone {
  padding-left: 236px;
}
.select-phone > img {
  width: 30px;
}
.from-input {
  text-align: left;
}
</style>
